<template>
    <view class="withdraw-page">
        <view class="header">
            <image class="img-title" src="../../static/icon/back-btn.png" @click="navigateBack" mode="" />
            <view class="title">{{ PageType == 0 ? `提現` : `儲值` }}</view>
        </view>
        <view class="withdraw-content">
            <view class="withdraw-balance" v-if="PageType == 0">
                <view class="withdraw-balance-title">可提現餘額</view>
                <view class="withdraw-balance-amount">{{ userInfo.enableAmt }}</view>
            </view>
            <view class="withdraw-form">
                <view class="withdraw-form-item">
                    <view class="withdraw-form-item-label">{{ PageType == 0 ? `提現` : `儲值` }}金額</view>
                    <view class="withdraw-form-item-input">
                        <input type="number" disabled @focus="keyboardShow = true"
                            :placeholder="PageType == 0 ? `请输入提現金額` : `请输入儲值金額`" v-model="withMoney" />
                    </view>
                </view>
                <view class="withdraw-form-item">
                    <view class="withdraw-form-item-label">{{ PageType == 0 ? `提現` : `儲值` }}方式</view>
                    <view class="withdraw-form-item-input">
                        <view class="dropDowmBox">
                            <!-- 下拉列表 -->
                            <view class="dropDowm">
                                <view class="current" @click="openSlide()">
                                    {{ state.withdrawMethod }}
                                    <u-icon :class="['icon', current ? '' : 'deg90']" name="arrow-down-fill"></u-icon>
                                </view>
                                <view :class="['slide', current ? 'show' : '']">
                                    <view class="slide-item" v-for="(item, index) in options1" @click="change(item.label)">
                                        {{ item.label }}
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
    <setPassword :isYan='false' :IsUpset="false" :show="keyboardShow" @finish="submitWithdraw" @change="old_keys" />
    <u-keyboard ref="uKeyboard" mode="number" :dot-enabled="false" @backspace="backspace" @change="valChange"
        :tooltip="false" v-model="isSHowPasswordMedal">
        <view class="popup">
            <view class="title">{{ $t('with.getWith') }}</view>
            <view class="with-info">
                <view class="with">{{ $t('with') }}</view>
                <view class="value">{{ withMoney }}</view>
            </view>
        </view>
        <u-message-input :maxlength="6" v-model="with_Pwd" :disabled-keyboard="true" :dot-fill="true"></u-message-input>
        <view style="height: 60rpx;"></view>
    </u-keyboard>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import { requestApi } from '@/api';
import setPassword from '../../components/xiong-setPassword/index.vue'
import { toast } from '@/utils/storage';
const PageType = ref(0)
onLoad((e) => {
    PageType.value = e.type
    getUserInfo()
    getBankInfo()
})




const state = reactive({
    balance: 100.00,
    withdrawAmount: '',
    withdrawMethod: '銀行卡1',
    withdrawAccount: '',
    withdrawName: '',
    withdrawCode: ''
})

const options1 = ref([

])
// 獲取用戶銀行卡信息
const cardLength = ref()
async function getBankInfo() {
    const { status, data } = await requestApi.getBankInfo()
    options1.value.push({
        label: data.bankName
    })
    cardLength.value = options1.value.length * 80 + 'rpx'
    state.withdrawMethod = data.bankName

}
function change(params) {
    state.withdrawMethod = params
    current.value = !current.value
}
const current = ref(false)
function openSlide() {
    current.value = !current.value
}
const keyboardShow = ref(true)
const isSHowPasswordMedal = ref(false)
// 提現金額
const withMoney = ref('')
const submitWithdraw = () => {
    const { withPwd } = userInfo.value
    // 提現
    if (PageType.value == 0) {
        if (withPwd) {
            if (withMoney.value == '') {
                uni.showToast({
                    title: '請輸入提現的金額',
                    icon: 'none',
                    duration: 2000
                });
            } else {
                // 提交提現申请
                // 在這裡發請求
                isSHowPasswordMedal.value = true
                keyboardShow.value = false
                // uni.showToast({
                //     title: '提現成功',
                //     icon: 'success',
                //     duration: 2000
                // });
            }
        } else {
            uni.showModal({
                title: "提現失敗",
                content: "尚未設置提現密碼，是否前去設置提現密碼？",
                cancelText: '取消',
                confirmText: '確認',
                success: function (res) {
                    if (res.confirm) {
                        uni.navigateTo({ url: '/pages/with/withPwd' })
                    } else if (res.cancel) {
                        uni.showToast({
                            title: '提現失敗',
                            icon: 'none',
                            duration: 2000
                        });
                    }
                }
            })
        }
    } else {
        // 儲值
        console.log(withMoney.value);
    }
}


// 按键被点击(点击退格键不会触发此事件)
function old_keys(val) {
    withMoney.value = val;
}

const with_Pwd = ref('')
function valChange(val) {
    // 将每次按键的值拼接到value变量中，注意+=写法
    with_Pwd.value += val;

}
function backspace() {
    if (with_Pwd.value.length) with_Pwd.value = with_Pwd.value.substr(0, with_Pwd.value.length - 1);
}
async function changeWidPwd(e) {
    const opt = {
        amt: withMoney.value,
        with_Pwd: e
    }
    const { status, msg } = await requestApi.outMoney(opt)
    if (status == 0) {
        toast(msg, 'none', 2000)
    } else {
        toast(msg, 'error', 2000)
    }
}
watch(isSHowPasswordMedal, (n, o) => {
    if (n) {
        keyboardShow.value = false
    } else {
        keyboardShow.value = true
        with_Pwd.value = ''
    }
})
watch(with_Pwd, (n, o) => {
    if (n.length == 6) {
        changeWidPwd(with_Pwd.value)
    }
})


// 獲取用戶信息
const userInfo = ref({})
async function getUserInfo() {
    const { status, data } = await requestApi.getUserInfo()
    userInfo.value = data
}

// 返回上一层
function navigateBack() {
    let canNavBack = getCurrentPages()
    if (canNavBack && canNavBack.length > 1) {
        uni.navigateBack()
    } else {
        history.back();
    }
}
</script>

<style lang="scss">
page {
    background-color: #F3F3F3;
}

.withdraw-page {
    .header {
        width: 100%;
        height: 88rpx;
        padding-top: 20rpx;
        //  #ifndef H5
        padding-top: 80rpx;
        //  #endif
        padding-bottom: 15rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        background-color: #FFFFFF;
        top: 0;

        .title {
            text-align: center;
            color: #2D2D2D;
            margin: 0 auto;
            padding-right: 104rpx;
            font-size: 32rpx;
        }

        .img-title {
            mix-blend-mode: difference;
            width: 58rpx;
            height: 58rpx;
            margin-left: 46rpx;
        }
    }


    .withdraw-content {
        padding: 50rpx 50rpx 90rpx;
        margin: 118rpx 30rpx 950rpx;

        border-radius: 10rpx;
        background-color: #fff;

        .withdraw-balance {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30rpx;

            .withdraw-balance-title {
                font-size: 32rpx;
            }

            .withdraw-balance-amount {
                font-size: 32rpx;
            }
        }

        .withdraw-form {
            .withdraw-form-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                text-align: right;
                margin-bottom: 40rpx;

                .withdraw-form-item-label {
                    font-size: 24rpx;
                    font-weight: bold;
                }

                .withdraw-form-item-input {
                    flex: 1;
                    margin-left: 20rpx;
                    position: relative;

                    .dropDowmBox {
                        position: absolute;
                        z-index: 1000;
                        height: 40rpx;
                        width: 100%;
                        top: -10rpx;

                        .dropDowm {
                            position: relative;

                            .current {
                                height: 40rpx;
                            }

                            .slide {
                                position: absolute;
                                overflow: hidden;
                                width: 100%;
                                height: 0rpx;
                                padding-right: 37rpx;
                                background-color: #F9F9F9;
                                transition: all .25s;
                                z-index: 1000;
                            }

                            .slide-item {
                                height: 80rpx;
                                line-height: 80rpx;
                            }

                            .show {
                                height: v-bind('cardLength');
                            }

                            .u-icon {
                                transition: all .25s;
                            }

                            .deg90 {
                                transform: rotateZ(90deg);
                            }
                        }
                    }
                }
            }

        }
    }

    .withdraw-form-item-submit {
        width: 80%;
        height: 88rpx;
        line-height: 88rpx;
        margin-top: 40rpx;
        background-color: #ff5a5f;
        border: none;
        border-radius: 44rpx;
        font-size: 32rpx;
        color: #fff;
        cursor: pointer;
        // background-color: #176CED;
    }
}

.popup {
    .title {
        text-align: center;
        margin-top: 30rpx;
    }

    .with-info {
        height: 250rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .value {
            font-size: 70rpx;
            font-weight: 900;
        }
    }
}
</style>
